<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>移除标记</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container {
   min-width:603px;
   min-height:767px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZW7BZ-MS4WI-K45G3-55CPY-EZRX3-SHF62"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
//定义地图，标记数组
var map,markersArray = [];
    var init = function() {
    //设置地图中心点

    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(onSuccess , onError);
    }else{
      var center = new qq.maps.LatLng(39.916527,116.397128);
       map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 13
        });
    }
//定位数据获取成功响应
    function  onSuccess(position){
          console.log('纬度: '    + position.coords.latitude +'经度: '         + position.coords.longitude);
          var center = new qq.maps.LatLng(position.coords.latitude ,position.coords.longitude);
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 13
            });
            mapClick();

    }
    function  onError(position){
        var center = new qq.maps.LatLng(39.916527,116.397128);
        map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 13
        }); 
        mapClick()
    }

    // var center = new qq.maps.LatLng(39.916527,116.397128);
    // map = new qq.maps.Map(document.getElementById('container'),{
    //     center: center,
    //     zoom: 13
    // });
    //添加dom监听事件
    function mapClick(){
        qq.maps.event.addDomListener(map, 'click', function(event) {
        deleteOverlays();
        console.log(event);
        addMarker(event.latLng);
        var pos=event.latLng.lat+","+event.latLng.lng;
        console.log(pos)
        //var coord=new qq.maps.LatLng(39.987816,116.328327);
        var coord=new qq.maps.LatLng(event.latLng.lat,event.latLng.lng);
        console.log("coord",coord)
        var geocoder = new qq.maps.Geocoder({
            complete:function(result){
                console.log('成功：'+result.detail.address);
            }
        });
        geocoder.getAddress(coord);

    }); 
    }
   
}

//添加标记
function addMarker(location) {
    var marker = new qq.maps.Marker({
        position: location,
        map: map
    });
    markersArray.push(marker);
}

//清除覆盖层
// function clearOverlays() {
//     if (markersArray) {
//         for (i in markersArray) {
//             markersArray[i].setMap(null);
//         }
//     }
// }

//显示覆盖层
// function showOverlays() {
//     if (markersArray) {
//         for (i in markersArray) {
//             markersArray[i].setMap(map);
//         }
//     }
// } 


//删除覆盖物
function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
}
</script>
</head>
<body onload="init()">
<div>
<span>单击地图添加标记</span> 
<input onclick="clearOverlays();" type=button value="清除标记"/>
<input onclick="showOverlays();" type=button value="显示标记"/>
<input onclick="deleteOverlays();" type=button value="删除标记"/>
</div>
<div><input type="text" name="address" id="address"><button id="yesAddress">确定</button></div>
<div id="container"></div>
<script type="text/javascript">
    var markClick=[];//存放标记的数组
    var yesAddress=document.getElementById("yesAddress");
    var inputAdd=document.getElementById("address");
     yesAddress.addEventListener("click",function(e){
        var geocoder,map, marker = null;
        geocoder = new qq.maps.Geocoder();
         var addressInput= inputAdd.value; 
        console.log("input address",addressInput)        
            geocoder.getLocation(addressInput); //对指定地址进行解析
            //设置服务请求成功的回调函数
            geocoder.setComplete(function(result) {
            var lat = result.detail.location.lat; //经度
            var lng = result.detail.location.lng; //纬度
            var center =new qq.maps.LatLng(lat ,lng);
            map =new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 13
            });
            
            var marker = new qq.maps.Marker({
                position:center,
                map: map
            });
            markClick.push(marker);
             qq.maps.event.addDomListener(map, 'click', function(event) {
                //清除标记
                if(markClick){
                    for(var j=0,len=markClick.length;j<len;j++){
                        markClick[j].setMap(null);
                    }
                }
                //添加标记
                var center =new qq.maps.LatLng(event.latLng.lat,event.latLng.lng);
                var marker = new qq.maps.Marker({
                    position:center,
                    map: map
                });
                markClick.push(marker);
                //获取的经纬度
                console.log("经纬度",event.latLng)
                var coord=new qq.maps.LatLng(event.latLng.lat,event.latLng.lng);
                //点击设置具体值
                var geocoder = new qq.maps.Geocoder({
                    complete:function(result){
                        console.log("点击地理定位",result.detail.address)
                        document.getElementById("address").value=result.detail.address
                    }
                });
                geocoder.getAddress(coord);
            }); 
            // document.getElementById("lng").value=lng;
            // document.getElementById("lat").value=lat;
            document.getElementById("address").value=addressInput;
            markersArray.push(marker);
           
        })
     })
</script>
</body>
</html>